<template>
    <!-- 导航 -->
    <div class="Head">
        <!-- <a href="http://127.0.0.1:8080/course/vip">
            <span :class="navId===1?'active':''" @click="change(1)">会员专区</span>
        </a>
        <a href="http://127.0.0.1:8080/course/video">
            <span :class="navId===2?'active':''" @click="change(2)">视频课</span>
        </a>
        <a href="http://127.0.0.1:8080/course/live">
            <span :class="navId===3?'active':''" @click="change(3)">直播课</span>
        </a>
        <a href="">
            <span :class="navId===4?'active':''" @click="change(4)">线下课</span>
        </a>
        <a href="http://127.0.0.1:8080/course/theme">
            <span :class="navId===5?'active':''" @click="change(5)">主题</span>
        </a> -->
        <ul class="header">
            <li>
                <span :class="navId===1?'active':''" @click="toRoute1(1)">会员专区</span>
            </li>
            <li>
                <span :class="navId===2?'active':''" @click="toRoute2(2)">视频课</span>
            </li>
            <li>
                <span :class="navId===3?'active':''" @click="toRoute3(3)">直播课</span>
            </li>
            <li>
                <span :class="navId===4?'active':''" @click="toRoute4(4)">线下课</span>
            </li>
            <li>
                <span :class="navId===5?'active':''" @click="toRoute5(5)">主题</span>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

let router = useRouter()
//定义一个下划线高亮标识 switch case
let navId = ref(1)
const toRoute1 = (value: number) => {
    navId.value = value
    router.push({ path:'/course/vip' })
}
const toRoute2 = (value: number) => {
    console.log(value)
    navId.value = value
    router.push({ path:'/course/video' })
}
const toRoute3 = (value: number) => {
    navId.value = value
    router.push({ path:'/course/live' })
}
const toRoute4 = (value: number) => {
    navId.value = value
    router.push({ path:'' })
}
const toRoute5 = (value: number) => {
    navId.value = value
    router.push({ path:'/course/theme' })
}


</script>

<style scoped>
.Head {
    width: 100%;
    height: 80px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-bottom: 10px; */
}

.Head .header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 30px;
}
.Head .header li{
    padding-right: 50px;
}
.Head .active {
    /* display: inline-block; */
    width: 70px;
    height: 61px;
    box-sizing: border-box;
    border-bottom: 3px solid #fff;
    text-align: center;
    padding-bottom: 27px;
}

a {
    text-decoration: none;
    color: #000;
}
</style>